﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test4.aspx.cs" Inherits="test4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link href="img/uboxiconR-02.ico" rel="SHORTCUT ICON" />
    <title>UBOX</title>

    <!-- Bootstrap Core CSS -->

    <%--<link href="sd/css/bootstrap.min.css" rel="stylesheet" />--%>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <!-- Custom CSS -->

    <link href="sd/css/sb-admin.css" rel="stylesheet" />
    <!-- Morris Charts CSS -->

    <link href="sd/css/plugins/morris.css" rel="stylesheet" />

    <!-- Custom Fonts -->

    <link href="sd/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <%--[if lt IE 9]>--%>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <%--<![endif]--%>

    <script src="Scripts/responsive-nav.min.js"></script>


    <script src="Content/js/jquery.js"></script>
    <script src="Content/js/jquery.MyFloatingBg.js"></script>

         <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

    <style>
        body {

            display: block;
            margin:0px;

            /*background-color: #222;*/    
            background-color: #f8f8f8 ;
        }


        .m {
             /*position : absolute;*/

            /*text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 36px;
            line-height: 500px;*/
            

            /*-webkit-filter: blur(1.5px);*/ /* Chrome, Opera */
            /*-moz-filter: blur(1.5px);
            -ms-filter: blur(1.5px);
            filter: blur(1.5px);*/
            /*z-index:-1;*/
        }

        .container {
            /*position :fixed;*/
            padding:180px;
            margin:0 auto;

            /*background-color:rgba(0, 0, 0,0.1);*/
            /*top:0px;
            left:0px;*/
            /*z-index:2;*/
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }

            .form-signin .form-signin-heading,
            .form-signin .checkbox {
                margin-bottom: 10px;
            }

            .form-signin .checkbox {
                font-weight: normal;
            }

            .form-signin .form-control {
                position: relative;
                height: auto;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 10px;
                font-size: 16px;
            }

                .form-signin .form-control:focus {
                    z-index: 2;
                }

            .form-signin input[type="email"] {
                margin-bottom: -1px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }

            .form-signin input[type="password"] {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        .login-panel {
            border-width: 0px;
            background: rgba(0,0,0,0.1);
            background: #000 9; /*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
            filter: Alpha(opacity=60); /*只对ie7,ie8有效*/
            width: 400px;
        }

        .btn {
            border-width: 3px;
            border-style: solid;
            background: rgba(0,0,0,0.1);
            background: #000 9; /*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
            filter: Alpha(opacity=60); /*只对ie7,ie8有效*/
        }


        @media screen and (max-width: 992px) {

            .container {
                margin: 0 auto;
            }

            @media screen and (min-width: 480px) {
                .container {
                    margin: 0 auto;
                    width: 450px;
                }
            }
        }

     
    </style>

</head>
<body>
   

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">UBOX登入</h3>
                    </div>

                    <div class="panel-body">
                        <form role="form" class="form-signin">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" title="E-mail" />

                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="" title="密碼"/>
                                </div>
                                <div class="checkbox">
                                    <h5><label>
                                        <input name="remember" type="checkbox" value="Remember Me" title="Remember Me" /><span style="color:#fff">Remember Me</span>
                                    </label></h5>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->


                                    <a href="#" class="btn btn-lg btn-success btn-block" title="登入">Log in</a>


                            </fieldset>
                        </form>
                        <hr />

                        <div class="row text-center">

                            <div class="col-md-12 col-sm-12">
                                <button type="button" class="btn btn-primary btn-block" title="Facebook">Facebook</button>
                            </div>

                            <br /><br />
                            <%--<div class="col-md-4 col-sm-12">
            <button type="button" class="btn btn-info btn-block">Twitter</button>
        </div>--%>

                            <div class="col-md-12 col-sm-12">
                                <button type="button" class="btn btn-danger btn-block" title="Google+">Google+</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <div id="demoDiv1" bg="img/fw2.jpg" class="m">
        <%--<div style="color: #fff">
         </div> --%> 
    </div>
     <script type="text/javascript">
         $(document).ready(function () {
             //weather
             $("#demoDiv1").MyFloatingBg({ direction: -1 });
             $(".m").css("width", $(window).width()).css("height", $(window).height());
             $(".container").css("width", $(window).width()).css("height", $(window).height());
         });
    </script>


</body>
</html>
